<template>
  <s-tabs @getList="getList" @tab-click="tabClick" ref="sTabs" @setLoading="setLoading" :loading="loading">
    <template #search>
      <span class="top_span2" style="margin-right: 14px">时间选择：</span>
      <el-date-picker size="mini" @change="handleDatePickerChange" style="width: 400px;" v-model="dataTime"
        :picker-options="options" unlink-panels format="yyyy-MM-dd HH:mm" type="datetimerange" start-placeholder="开始日期"
        end-placeholder="结束日期"></el-date-picker>
      <span class="top_span2" style="margin-left: 30px;">RTU选择：</span>
      <el-select size="mini" v-model="rtuIndex" clearable filterable style="width: 240px;">
        <el-option v-for="item in list" :value="item.rtuIndex" :label="item.rtuIndex"></el-option>
      </el-select>
      <el-button style="margin-left: 30px;" type="primary" @click="handleClick" size="mini">查 询</el-button>
      <el-button size="mini" @click="handleReset">重 置</el-button>
      <!-- 查询到的RTU -->
      <span style="margin-left: 30px;">总分钟数：{{(endTimeInSecond - startTimeInSecond) / 60}}分钟</span>
      <span style="margin-left: 30px;">总数量：{{count}}条数</span>
      <span style="margin-left: 30px;">去重后：{{RTUList.length}}条数</span>
      <span style="margin-left: 30px;color: #F56C6C;">丢数：{{ RTUList.length > 0 ? ((endTimeInSecond - startTimeInSecond) / 60) - RTUList.length : 0}}条数</span>
    </template>
    <template #list>
      <el-table row-key="id" ref="multiTable" height="calc(100vh - 300px)" :header-cell-class-name="cellClass"
        :data="RTUList" style="width: 100%" :cell-style="{ textAlign: 'center' }" :header-cell-style="{
        background: 'rgba(250, 250, 250, 1)',
        textAlign: 'center',}">
        <el-table-column label="序号" width="120">
          <template slot-scope="scope">{{scope.$index + 1}}</template>
        </el-table-column>
        <el-table-column label="日期" width="280">
          <template slot-scope="scope">{{handleFormatter(scope.row)}}</template>
        </el-table-column>
        <el-table-column prop="currentX" label="数据X">
          <template slot-scope="scope">{{Math.round(scope.row.currentX + scope.row.initialX)}}</template>
        </el-table-column>
        <el-table-column prop="currentY" label="数据Y">
          <template slot-scope="scope">{{Math.round(scope.row.currentY + scope.row.initialY)}}</template>
        </el-table-column>
        <el-table-column prop="currentZ" label="数据Z">
          <template slot-scope="scope">{{Math.round(scope.row.currentZ + scope.row.initialZ)}}</template>
        </el-table-column>
        <el-table-column prop="rssi" label="信号强度" />
      </el-table>
    </template>
  </s-tabs>
</template>

<script>
  import STabs from "@/components/Tabs";
  import { dataChartData, realTimeData } from "@/api/data";
  import { getManagerRTUInfo } from "@/api/manager";

  export default {
    components: {
      "s-tabs": STabs
    },
    data() {
      return {
        loading: false,
        uuid: "",
        rtuIndex: null,
        count: 0,
        rtuNameList: [],
        list: [],
        RTUList: [],
        dataTime: [],
        startTimeInSecond: "",
        endTimeInSecond: "",
        options: {
          // 时间不能大于当前时间
          disabledDate: time => {
            return time.getTime() > Date.now();
          },
          selectableRange: "00:00:00 - 23:59:59"
        },
      }
    },
    created() {
      // this.realTimeData();
      this.getManagerRTUInfo();
    },
    methods: {
      async handleReset() {
        this.dataTime = [];
        this.rtuIndex = null;
        this.RTUList = [];
      },
      getList() { },
      setLoading(isLoading) {
        this.loading = isLoading;
      },
      async tabClick(rtuList, uuid) {
        this.list = rtuList;
        this.uuid = uuid;
      },
      handleFormatter(row) {
        return `${new Date(row.dataTime).getFullYear()}-${new Date(row.dataTime).getMonth() + 1}-${new Date(row.dataTime).getDate()} ${new Date(row.dataTime).getHours()}:${new Date(row.dataTime).getMinutes() < 10 ? "0" + new Date(row.dataTime).getMinutes() : new Date(row.dataTime).getMinutes()}`;
      },
      // 获取指定DTU所属全部RTU
      async getManagerRTUInfo() {
        try {
          const { result: { data }, message, code } = await getManagerRTUInfo(this.uuid);
          if (code == 0) {
            this.list = JSON.parse(JSON.stringify(data));
            this.list.sort((firstItem, secondItem) => firstItem.rtuIndex - secondItem.rtuIndex);
          }
        } catch (err) {
          console.log("调用接口报错了", err);
        }
      },
      handleDatePickerChange() {
        this.startTimeInSecond = new Date(this.dataTime[0]).getTime() / 1000;
        this.endTimeInSecond = new Date(this.dataTime[1]).getTime() / 1000;
      },
      handleClick() {
        this.dataChartData();
      },
      // 查询图表数据
      async dataChartData() {
        try {
          if (this.dataTime.length == 0 || this.rtuIndex == null) {
            this.$message("请选择筛选条件");
          } else {
            this.loading = true;
            const { code, result: { data }, message } = await dataChartData({
              uuid: this.uuid,
              rtuIndex: [this.rtuIndex],
              startTimeInSecond: this.startTimeInSecond,
              endTimeInSecond: this.endTimeInSecond
            });
            if (code == 0) {
              this.count = JSON.parse(JSON.stringify(data[0].detail.length));
              const arr = JSON.parse(JSON.stringify(data[0].detail));
              arr.forEach((item, index) => {
                item.dataTime = this.handleFormatter(item);
              });
              this.RTUList = this.unipFun2(arr);
              this.RTUList.sort((firstItem, secondItem) => firstItem.rtuIndex - secondItem.rtuIndex);
              this.loading = false;
            }
          }
        } catch (err) {
          console.log("调用接口报错了", err);
          thia.loading = false;
        }
      },
      unipFun2(arr) {
        let arr1 = [];
        let newArr = [];
        for (let i = arr.length - 1; i >= 0; i--) {
          if (arr1.indexOf(arr[i].dataTime) == -1) {
            console.log(1);
            arr1.unshift(arr[i].dataTime);
            newArr.unshift(arr[i]);
          }
        }
        return newArr;
      },
      // 获取指定DTU所属全部RTU
      async realTimeData() {
        try {
          const { code, result: { data }, message } = await realTimeData({
            dtuUuid: this.uuid
          });
          if (code == 0) {
            this.RTUList = JSON.parse(JSON.stringify(data));
            this.RTUList.sort((firstItem, secondItem) => firstItem.rtuIndex - secondItem.rtuIndex);
          }
        } catch (err) {
          console.log("调用接口报错了获取RTU", err);
        }
      },
    }
  }
</script>

<style scoped>
  .hahaha {
    box-sizing: border-box;
    padding-top: 30px;
    padding-left: 30px;
    background-color: #fff;
    height: 100vh;
    overflow: scroll;
  }

  .hahaha .box {
    overflow-y: scroll;
    box-sizing: border-box;
    padding-bottom: 30px;
  }
</style>